<template>
  <div class="dashboard-editor-container">
    <div class="chart-wrapper1">
      <el-card>
        <el-form :model="seatForm" style="margin-top:10px;" size="mini" label-position="top" ref="seatForm">
          <el-row :gutter="10">
            <el-col :lg="3" :md="6">
              <el-form-item label='多媒体类型' prop='channel'>
                <el-select v-model="seatForm.channel" disabled placeholder="请选择多媒体类型">
                  <el-option v-for="item in channelOption" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="开始日期" prop="startDate">
                <el-date-picker size="mini" style="width:100%;" v-model="seatForm.startDate" type="date"
                  value-format="yyyyMMdd" :clearable='false' placeholder="开始日期" :picker-options="pickerOptionsStart"
                  @change="changeStart">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="结束日期" prop="endDate">
                <el-date-picker style="width:100%;" size="mini" v-model="seatForm.endDate" type="date"
                  value-format="yyyyMMdd" placeholder="结束日期" :picker-options="pickerOptionsEnd" @change="changeEnd"
                  :clearable='false'>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label='班' prop='company'>
                <el-select v-model="seatForm.company" placeholder="请选择班" @change="queryTeam">
                  <el-option key="index" label="全部" value="">
                  </el-option>
                  <el-option v-for="item in companyList" :key="item.TEAMID" :label="(item.TEAMID+'-'+item.TEAMNAME)"
                    :value="item.TEAMID">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="6" :lg="4">
              <el-form-item label="组" prop="team">
                <el-select v-model="seatForm.team" filterable placeholder="请选择组" @change="agentQuery">
                  <el-option key="index" label="全部" value="">
                  </el-option>
                  <el-option v-for="item in teamList" :key="item.TEAMID" :label="(item.TEAMID+'-'+item.TEAMNAME)"
                    :value="item.TEAMID"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="6" :lg="5">
              <el-form-item label="坐席" prop="agent">
                <el-select v-model="seatForm.agent" multiple collapse-tags placeholder="请选择坐席">
                  <el-option v-for="item in agentOptions" :key="item.AGENTID" :label="item.AGENTNAME" :value="item.AGENTID">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="12" :md="12" style="margin-top:10px;">
              <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="querySeat">查询
              </el-button>
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('seatForm')">重置</el-button>
              <el-button type="primary" size="mini" icon="el-icon-download" :disabled="tableData.length==0"
                @click="downloadTemplate">导出</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <el-row style="margin-top:20px">
      <el-col class="total-col">
        <el-card>
          <el-table :data="tableData" border :span-method="objectSpanMethod">
            <el-table-column prop="WORKDATE" label="日期" align="center" width="110"></el-table-column>
            <el-table-column prop="AGENTID" label="坐席id" align="center" width="100"></el-table-column>
            <el-table-column prop="AGENTNAME" label="坐席名称" align="center" width="100"></el-table-column>
            <!-- <el-table-column prop="ID" label="ID" align="center"></el-table-column> -->
            <el-table-column prop="WORKDURN" label="值机时长" align="center">
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.WORKDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="LOGINCOUNT" label="签入次数" align="center"></el-table-column>
            <el-table-column prop="LOGINDURN" label="签入时长"  align="center"  width="110">
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.LOGINDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="LOGOUTCOUNT" label="签出次数" align="center"></el-table-column>
            <el-table-column prop="BREAKTYPECOUNT" label="小休次数" align="center"></el-table-column>
            <el-table-column prop="BREAKTYPEDURN" label="小休时长" width="100" align="center">
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.BREAKTYPEDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="VIDEO_READYCOUNT" label="就绪次数"   align="center"></el-table-column>
            <el-table-column prop="VIDEO_READYDURN" label="就绪时长" width="110" align="center">、
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.VIDEO_READYDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="VIDEO_NOTREADYCOUNT" label="示忙次数" align="center"></el-table-column>
            <el-table-column prop="VIDEO_NOTREADYDURN" label="示忙时长" align="center" width="110">
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.VIDEO_NOTREADYDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="VIDEO_AFTERCALLWORKCOUNT" label="整理次数" align="center"></el-table-column>
            <el-table-column prop="VIDEO_AFTERCALLWORKDURN" label="整理时长" width="100" align="center">
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.VIDEO_AFTERCALLWORKDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="VIDEO_MATCHEDCOUNT" label="匹配成功次数" align="center"></el-table-column>
            <el-table-column prop="VIDEO_MATCHEDDURN" label="匹配成功时长" width="100" align="center">
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.VIDEO_MATCHEDDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="VIDEO_RINGINGCOUNT" label="振铃次数" align="center"></el-table-column>
            <el-table-column prop="VIDEO_RINGINGDURN" label="振铃时长" width="100" align="center">
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.VIDEO_RINGINGDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="VIDEO_ANSWERCOUNT" label="视频建立次数" align="center"></el-table-column>
            <el-table-column prop="VIDEO_ANSWERDURN" label="视频建立时长" width="100" align="center">
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.VIDEO_ANSWERDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="VIDEO_ESTABLISHEDCOUNT" label="通话次数" align="center"></el-table-column>
            <el-table-column prop="VIDEO_ESTABLISHEDDURN" label="通话时长" width="110" align="center">
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.VIDEO_ESTABLISHEDDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="VIDEO_RELEASECOUNT" label="挂断次数" align="center"></el-table-column>
            <el-table-column prop="VIDEO_BACKTOTEAMCOUNT" label="重新入队次数" align="center"></el-table-column>
            <el-table-column prop="VIDEO_SWITCHCOUNT" label="转发次数" align="center"></el-table-column>
            <el-table-column prop="VIDEO_ESTABLISHEAVGDDURN" label="平均通话均长" width="100" align="center">
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.VIDEO_ESTABLISHEAVGDDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="VIDEO_RINGINGAVGDURN" label="平均振玲时长" align="center">
              <template slot-scope="scope">
                <div>
                  {{secondFormat(scope.row.VIDEO_RINGINGAVGDURN)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="VIDEO_BEP" label="工时利用效率" align="center"></el-table-column>
             <el-table-column prop="VIDEO_ANSWER20COUNT" label="20S接通量" align="center"></el-table-column>
              <el-table-column prop="VIDEO_20SERVICELEVEL" label="20S服务水平" align="center"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  // 发送接口
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import requestYg from "@/common/utils/requestYg";
  import agentDaily from "@/message/siteManagement/report/agentDaily";
  // 班组接口
  import teamManage from "@/message/seat-manage/setaTeam/teamManage";
  // 坐席维护接口
   import agentManage from "@/message/seat-manage/SeatInfoManage/agentManage";
   import toolBox from "@/common/utils/toolBox";
  export default {
    name: '',
    data() {
      return {
        fileUrl: getGlobalParams.get("FileDownloadAddress"),
        spanArr: [],
        pos: 0,
        pickerOptionsStart: {
          disabledDate: (time) => {
            return time.getTime() > Date.now() - 8.64e7
          }
        },
        pickerOptionsEnd: {
          disabledDate: (time) => {
            return time.getTime() > Date.now() - 8.64e7
          }
        },
        agentOptions: [],
        tableData: [],
        testData: [],
        channelOption: [{
            value: 'video',
            label: '视频'
          },
          {
            value: 'voice',
            label: '电话'
          },
          {
            value: 'chat',
            label: '文字'
          },
        ],
        seatForm: {
          startDate: this.getDay(-2),
          endDate: this.getDay(-1),
          channel: 'video',
          company: "",
          team: "",
          agent: []
          // agent: '',
        },
        teamList: [],
        companyList: [],
        dictionaryOption: [],
        loading: false,
      }
    },
    computed: {},
    created() {},
    mounted() {
      this.querySeat()
      this.queryClass()
      this.agentQuery()
    },
    watch: {},
    methods: {
      // 秒格式化
      secondFormat(value){
        return toolBox.formatSeconds(value)
      },
      // 获取当天前一天
      getDay(day) {
        var dd = new Date();
        dd.setDate(dd.getDate() + day);
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
        return y + "" + m + "" + d;
      },
      // 导出报表
      async downloadTemplate() {
        let resBody
        resBody = new agentDaily()
        // resBody.data.AGENTID = this.seatForm.agent
        resBody.data.MEDIA = this.seatForm.channel
        resBody.data.AGENTID = this.seatForm.agent.join(',')
        resBody.data.SRTDATE = this.seatForm.startDate
        resBody.data.ENDDATE = this.seatForm.endDate
        resBody.data.FLAG = '1'
        let response = await requestYg(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          let res = response.RSP_BODY
          let name = res.FileName
          let url = res.FilePath
          this.downloadFile(this.fileUrl + url + '/' + name)
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 合并单元格
      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex === 0) {
          if (columnIndex === 0 || columnIndex === 5) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
              rowspan: _row,
              colspan: _col
            }
          }
        }
      },
      getSpanArr(data) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i].WORKDATE === data[i - 1].WORKDATE) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }
          }
        }
      },
      //  开始日期
      changeStart() {
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.seatForm.startDate) {
              return time.getTime() < Date.parse(this.seatForm.startDate.slice(0, 4) + '-' + this.seatForm
                .startDate.slice(4, 6) +
                '-' + this.seatForm.startDate.slice(6, 8)) - 8.64e7 || time.getTime() > Date.now() - 8.64e7;
            } else {
              return time.getTime() > Date.now() - 8.64e7;
            }
          }
        })
      },
      // 结束日期
      changeEnd() {
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.seatForm.endDate) {
              return time.getTime() > Date.parse(this.seatForm.endDate.slice(0, 4) + '-' + this.seatForm.endDate
                .slice(4, 6) + '-' +
                this.seatForm.endDate.slice(6, 8)) || time.getTime() > Date.now() - 8.64e7;
            } else {
              return time.getTime() > Date.now() - 8.64e7;
            }
          }
        })
      },
      // 查询坐席
      async agentQuery() {
        let resBody = new agentManage();
        resBody.data.OPERATION = '5'
        resBody.data.AGENTCLASS = this.seatForm.company
        resBody.data.AGENTTEAM = this.seatForm.team
        // resBody.data.PAGEFLAG = '5';
        let response = await requestYg(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
           this.agentOptions = response.RSP_BODY.struct;
           this.querySeat()
        }else {
          this.$message({
            type: "error",
            message: '该组下没有关联的坐席'
          })
          // this.seatForm.team = ''
          this.agentOptions = []
        }
      },
      // 查询班
      async queryClass() {
        let resBody = new teamManage();
        resBody.data.OPERATION = "4";
        resBody.data.TEAMTYPE = "1";
        let response = await requestYg(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
           this.companyList = response.RSP_BODY.struct;
        }else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
          this.companyList = []
        }
      },
      // 查询组
      async queryTeam() {
        this.agentOptions = []
        this.seatForm.team = ''
        if(this.seatForm.company == ''){
          this.seatForm.team = ''
          return
        }
         let resBody = new teamManage();
        resBody.data.OPERATION = '4'
        resBody.data.TEAMTYPE = '2'
        resBody.data.PAGEFLAG = 4
        resBody.data.CURRPAGE = 1
        resBody.data.PAGEROWNUM = 100
        resBody.data.HTEAMID = this.seatForm.company
        let response = await requestYg(resBody);
        if (response.SYS_HEAD.ReturnCode === "000000") {
          this.teamList = response.RSP_BODY.struct
          this.agentQuery()
        } else {
          this.$message({
            type: "error",
            message: '该班下没有对应组'
          });
          this.teamList = []
          // this.seatForm.team = ''
          this.seatForm.company =''
        }
      },
      // 查询坐席日报
      async querySeat() {
        let resBody = new agentDaily();
        // resBody.data.AGENTID = this.seatForm.agent
        if(this.seatForm.agent.length == 0){
          this.seatForm.team = this.seatForm.company==''?'':this.seatForm.team
          let agent = []
          this.agentOptions.forEach(item => {
            agent.push(item.AGENTID)
          })
          resBody.data.AGENTID = this.seatForm.company==''?'':agent.join(',')
        }else{
          resBody.data.AGENTID = this.seatForm.agent.join(',')
        }
        resBody.data.SRTDATE = this.seatForm.startDate
        resBody.data.ENDDATE = this.seatForm.endDate
        resBody.data.MEDIA = this.seatForm.channel
        resBody.data.FLAG = '0'
        let response = await requestYg(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.testData = response.RSP_BODY.struct
          this.tableData = []
          this.testData.forEach(item => {
            item.MONITER.forEach(ele => {
              ele.WORKDATE = item.WORKDATE
            })
          })
          this.testData.forEach(item => {
            item.MONITER.forEach(ele => {
              this.tableData.push(ele)
            })
          })
          this.spanArr = []
          this.getSpanArr(this.tableData)
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 重置查询条件
      clearForm(item) {
        // 重置表格
        this.$refs["" + item].resetFields();
      },
    }
  }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .main {
    margin-bottom: 5px;
    height: 100%;
    background: #f0f2f5;

    .total-col {
      width: 100%;
      // height: 100%;
      background: #ffffff;
    }

    .left-col {
      height: 100%;
      background: #ffffff;
    }

    .right-col {
      height: 100%;
      background: #ffffff;
      margin-left: 20px;
    }

    .el-card {
      height: 100%;
    }

    .linstyel {
      padding-top: 30px;
      height: 100%;
    }

    .main1 {
      height: 40%;
    }

    .main2 {
      height: 40%;
    }

    .class1 {
      margin-left: 20px;
      display: inline-block;
      width: 10px;
      height: 10px;
      //  border: 1px solid #2ca7e9;
      background-color: #2ca7e9;
    }

    .class2 {
      margin-left: 20px;
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #19d4ae;
      //  border: 1px solid red;
    }
  }

  .dashboard-editor-container {
    height: 100%;
    padding: 16px;
    background-color: rgb(240, 242, 245);

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }

    .chart-wrapper1 {
      background: #f5f5f5;
      // padding: 16px 16px 0;
      margin-bottom: 2px;
      color: #2ca7e9;
    }

    .chart-wrapper2 {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;

      height: 100%;
      float: left;
    }

    .a {
      float: right;

    }
  }

</style>
